<script setup>

 
// 导入轮播图组件
import Swiper from './components/swiper.vue'
// 导入搜索组件
import Search from './components/search.vue'
// 导入医院等级组件
import HospitalLevel from './components/level.vue'
// 导入地区组件
import Area from './components/areas.vue'
// 导入医院卡片组件
import HospitalCard from './components/hospitalCard.vue'
import { getHospitalListAPI, getHospitalByKeywordAPI } from '@/api/hospital.js'
import { ref , onMounted} from 'vue' 
import { useRouter } from 'vue-router'


// 请求参数
const params = ref({
  page: 1,
  limit: 10,
  hostype: '',
  districtCode: ''
})

// 路由对象
const router = useRouter()

// 医院数据
const hospitalList = ref([])

// 获取医院数据
const getHospitalList = async () => {
  const res = await getHospitalListAPI(params.value)
  console.log(res);
  hospitalList.value = res.data.content
  total.value = res.data.totalElements
}
// 医院总数
const total = ref(0)

// 初始化调用
onMounted(() => {
  getHospitalList()
})

// 切换页数
const handleSizeChange = () => {
  // 每页条数改变时触发
  getHospitalList()


}

// 切换页码
const handleCurrentChange = () => {
  // console.log(params.value.page);
  getHospitalList()
}

// 切换等级
const changeLevel = (value) => {
  params.value.hostype = value
  getHospitalList()
}

// 切换地址
const changeArea = (value) => {
  params.value.districtCode = value
  getHospitalList()
  // console.log(value);

}

// 点击医院跳转
const goDetail = (id) => {
  router.push({path: `/hospital/register`, query: {hoscode: id}})
}
</script>
<template >
    <div class="content">
      <Swiper></Swiper>
        <!-- 医院搜索区域 -->
      <Search ></Search>

        <!-- 医院列表 -->
        <el-row :gutter="20">
          <el-col :span="20">
            <!-- 医院等级 -->
            <HospitalLevel @onChange="changeLevel"></HospitalLevel>
            <Area @onChange="changeArea"></Area>
            <div class="hospital-container" v-if="hospitalList?.length > 0">
              <HospitalCard v-for="item in hospitalList" :key="item" :data="item" @click="goDetail(item.hoscode)"></HospitalCard>
              <div style="width: 100%;">
                <el-pagination
              v-model:current-page="params.page"
              v-model:page-size="params.limit"
              :page-sizes="[10, 20, 30, 40]"
              :background="background"
              layout="prev, pager, next, jumper,->, sizes,total"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
              </div>
            </div>
            <el-empty v-else description="暂无医院"></el-empty>
          </el-col>
          <el-col :span="4">
             <div class="tip">
              <div class="deparment">
                <div class="header">
                  <div class="left">
                    <svg t="1706261944951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2540" width="16" height="16"><path d="M400.696008 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.984503 31.233352 31.233352 31.233352s31.233352-13.984503 31.233352-31.233352l0-30.470989C431.92936 143.078673 417.944857 129.093147 400.696008 129.093147z" fill="#1296db" p-id="2541"></path><path d="M623.647823 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.984503 31.233352-31.233352l0-30.470989C654.881175 143.078673 640.896672 129.093147 623.647823 129.093147z" fill="#1296db" p-id="2542"></path><path d="M425.695379 312.937269c11.209296 18.047028 41.974997 48.588625 86.152149 48.588625 43.958164 0 75.100442-30.308283 86.573751-48.223305 9.302877-14.528901 5.068436-33.846876-9.455349-43.149752-14.539134-9.307993-33.851992-5.063319-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-19.993357 0-32.428573-18.107403-33.271778-19.373233-9.17087-14.417361-28.28009-18.799158-42.829458-9.760295C421.089477 279.028994 416.591023 298.28557 425.695379 312.937269z" fill="#1296db" p-id="2543"></path><path d="M564.242851 625.945145l-20.278859 0L543.963992 462.486306c0-17.253966-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.979386-31.233352 31.233352l0 163.457816-20.283975 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L647.532813 709.234083C647.532813 663.309124 610.168834 625.945145 564.242851 625.945145zM585.066109 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L461.214337 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L440.392102 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L585.066109 812.258505z" fill="#1296db" p-id="2544"></path><path d="M250.808256 625.945145l-17.482163 0 0-266.970354c0-35.483142 28.864398-64.35368 64.343447-64.35368 17.248849 0 31.233352-13.984503 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352c-69.924559 0-126.810151 56.890708-126.810151 126.820384l0 266.970354-23.079648 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L334.099241 709.234083C334.098217 663.309124 296.734238 625.945145 250.808256 625.945145zM271.630491 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L147.778718 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L126.956484 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L271.630491 812.258505z" fill="#1296db" p-id="2545"></path><path d="M876.565113 625.945145l-21.961174 0 0-266.970354c0-69.929676-56.890708-126.820384-126.815267-126.820384-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.984503 31.233352 31.233352 31.233352c35.483142 0 64.348564 28.869514 64.348564 64.35368l0 266.970354-18.605753 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.034655 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L959.856098 709.234083C959.854051 663.309124 922.490072 625.945145 876.565113 625.945145zM897.387347 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L773.530458 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L752.708224 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.034655 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L897.387347 812.258505z" fill="#1296db" p-id="2546"></path></svg>
                    <span>常见科室</span>
                  </div>
                  <div class="right">
                    <span>全部</span>
                    <svg t="1706262062585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3740" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="3741"></path></svg>
                  </div>
                </div>
                <div class="content1">
                  <ul>
                    <li>神经内科</li>
                    <li>消化内科</li>
                    <li>呼吸内科</li>
                    <li>内科</li>
                    <li>神经外科</li>
                    <li>妇科</li>
                    <li>产科</li>
                    <li>儿科</li>
                  </ul>
                </div>
              </div>
              <div class="notice">
                <div class="header">
                  <div class="left">
                    <svg t="1706262794255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4836" width="16" height="16"><path d="M768.554667 824.490667v64H258.666667v-64h509.888zM906.666667 181.333333v533.333334h-789.333334v-533.333334h789.333334z m-64 64h-661.333334v405.333334h661.333334v-405.333334z m-115.712 237.824v64h-426.666667v-64h426.666667z m0-149.333333v64h-426.666667v-64h426.666667z" fill="#1296db" p-id="4837"></path></svg>
                    <span>停诊公告</span>
                  </div>
                  <div class="right">
                    <span>全部</span>
                    <svg t="1706262062585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3740" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="3741"></path></svg>
                  </div>
                </div>
                <div class="content1">
                  <ul>
                    <li>关于延长北京大学国际医院放假通知</li>
                    <li>关于延长北京大学国际医院放假通知</li>
                    <li>关于延长北京大学国际医院放假通知</li>
                  </ul>
                </div>
              </div>
              <div class="notice">
                <div class="header">
                  <div class="left">
                    <svg t="1706262794255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4836" width="16" height="16"><path d="M768.554667 824.490667v64H258.666667v-64h509.888zM906.666667 181.333333v533.333334h-789.333334v-533.333334h789.333334z m-64 64h-661.333334v405.333334h661.333334v-405.333334z m-115.712 237.824v64h-426.666667v-64h426.666667z m0-149.333333v64h-426.666667v-64h426.666667z" fill="#1296db" p-id="4837"></path></svg>
                    <span>平台公告</span>
                  </div>
                  <div class="right">
                    <span>全部</span>
                    <svg t="1706262062585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3740" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="3741"></path></svg>
                  </div>
                </div>
                <div class="content1">
                  <ul>
                    <li>关于延长北京大学国际医院放假通知</li>
                    <li>关于延长北京大学国际医院放假通知</li>
                    <li>关于延长北京大学国际医院放假通知</li>
                  </ul>
                </div>
              </div>
             </div>
          </el-col>
        </el-row>

    </div>
</template>

<style lang="scss" scoped>

.content {
  width: 1200px;
  margin: 0;
  padding: 0;
  .hospital-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  }
  .deparment{
  color: #7f7f7f;
  .header {
    display: flex;
    justify-content: space-between;
    
    .left {
      display: flex;
      span {
        margin-left: 5px;
      }
    }
    .right {
      display: flex;
      span {
        margin-right: 5px;
      }
    }
  }
  .content1 {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 40%;
        margin-top: 20px;
      }
    }
  }
 }
 .notice {
  color: #7f7f7f;
  margin-top: 50px;
  .header {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      span {
        margin-left: 5px;
      }
      }
    .right {
      display: flex;
      span {
        margin-right: 5px;
        }
      }
    }
    
    .content1 {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 100%;
          margin-top: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
 }
 


 
}
</style>
